<template>
  <view
    class="add-pop w100 h100 center form-ret-padd"
    :style="{ '--theme': themeColor }"
    v-if="visible"
  >
    <view class="content">
      <view class="form">
        <view class="title text-center">添加规格</view>
        <view>
          <u--form :model="form" :rules="rules" ref="form1">
            <u-form-item prop="title" labelWidth="0rpx">
              <view class="show-count">
                <u--input
                  v-model="form.specVal"
                  maxlength="10"
                  placeholder="请输入规格"
                />
                <view class="num">{{ form.specVal.length || 0 }}/10</view>
              </view>
            </u-form-item>
          </u--form>
        </view>
      </view>
      <view class="btns flex">
        <view @click="closeSpec()" class="flex1 center">取消</view>
        <view @click="save()" class="flex1 center save">保存</view>
      </view>
    </view>
  </view>
</template>
<script>
import { addSpec } from "@/service/api/sp-product/index";
export default {
  data() {
    return {
      showSpec: false,
      type: 0,
      form: {
        specVal: "",
      },
      rules: {
        specVal: [
          {
            type: "string",
            required: true,
            message: "请输入规格",
            trigger: ["blur", "change"],
          },
          {
            validator: (rule, value, callback) => {
              let flag = true;
              this.specList.some((v) => {
                if (value === v.title) {
                  flag = false;
                }
              });
              return flag;
            },
            message: "已存在该销售属性",
            // 触发器可以同时用blur和change
            trigger: ["change", "blur"],
          },
        ],
      },
    };
  },
  computed: {
    themeColor({ $theme }) {
      return $theme.themeColor.primary;
    },
  },
  props: {
    visible: {
      default: false,
    },
    specList: {
      type: Array,
      default: [],
      deep: true,
    },
  },
  onReady() {
    this.$refs.form1.setRules(this.rules);
  },
  methods: {
    closeSpec(type) {
      this.form.specVal = "";
      this.$emit("update:visible", false);
      this.$refs.form1.clearValidate();
    },
    save() {
      this.$refs.form1.validate().then((res) => {
        let { specVal: title } = this.form;
        addSpec({ title }).then((res) => {
          console.log(res);
          this.$emit("addSpec", {
            id: res,
            title,
          });
          this.closeSpec();
        });
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.add-pop {
  position: fixed;
  z-index: 10076;
  background-color: #00000080;
  top: 0;
  left: 0;
  &::v-deep .u-form-item__body {
    padding: 0 !important;
  }
  .content {
    background: #fff;
    width: calc(100% - 250rpx);
    padding: 40rpx 0 0;
    border-radius: 12rpx;
    overflow: hidden;
    .form {
      padding: 0 47rpx;
    }
    .title {
      font-size: 32rpx;
      color: #131313;
      font-weight: 500;
      margin-bottom: 35rpx;
    }
    .btns {
      margin-top: 25rpx;
      view {
        height: 80rpx;
        color: var(--theme);
        border-top: 1px solid #eee;
      }
      .save {
        background-color: var(--theme);
        color: #fff !important;
        border-color: var(--theme) !important;
      }
    }
  }
}
</style>
